<template>
	<view class="game_evaluate_page">
		
		<view class="re">
			<image src="@/static/images/banner_06.png" class="wp100" mode="widthFix"></image>
		</view>
		
		<view class="game_content_box">
			
			<view class="df jcsb">
				
				<view class="recommend_tag_btn">
					<image src="@/static/images/icon_06.png" class="img_7"></image>
					<view class="ml10">不推荐</view>
				</view> 
				
				<view class="current recommend_tag_btn">
					<image src="@/static/images/icon_07.png" class="img_7"></image>
					<view class="ml10">推荐</view>
				</view>
				
			</view>
			
			<view class="mt20 pt26 pb26 bb1">
				<view class="flex_box aic">
					<view class="item ov"><view class="fs32 fwb lh40 cor_333">玩家评价 45</view></view>
					<view class="df aic">
						<view class="active mode_sw">最新</view>
						<view class="line_ver_sty"></view>
						<view class="mode_sw">最热</view>
					</view>
				</view>
			</view>
			
			<view class="re">
				
				<view class="pt40 pb40 bb1" v-for="(item, index) in 3" :key="index">
					<view class="flex_box">
						<view class="re mr15"><image src="@/static/images/banner_01.png" class="game_user_pic"></image></view>
						<view class="item ov">
							<view class="df hp100 fldc jcsb">
								<view class="clamp_1 fs28 lh40 fwb cor_333">微信用户</view>
								<view class="fs24 lh32 cor_999">2025-04-13 19:59:02</view>
							</view>
						</view>
						<view class="df aic">
							<image src="@/static/images/icon_game_1.png" class="img_8"></image>
							<view class="ml10 fs24 cor_333">推荐</view>
						</view>
					</view>
					<view class="mt20 fs28 lh48 cor_333 clamp_4">引人入胜的故事情节: 每一部作品都有自己独特的故事背景和角色设定。 塞尔达公主与林克之间的冒险故事充满了神秘感和英雄主义色彩。 开放世界的自由度: 游戏世界庞大且充满细节，玩家可以自由探索各种环境和地形...</view>
					<view class="mt52 flex_box aic fs24 cor_333">
						<view class="item ov">
							<view class="df">
								<view class="re df aic">
									<image src="@/static/images/icon_game_2.png" class="img_5"></image>
									<view class="ml10">分享</view>
									<button open-type="share" class="btn_pos_opa"></button>
								</view>
							</view>
						</view>
						<view class="df aic">
							<image src="@/static/images/icon_game_3.png" class="img_8"></image>
							<view class="ml10">回复 <text class="">0</text></view>
						</view>
						<view class="ml35 df aic">
							<image src="@/static/images/icon_game_4.png" class="img_8"></image>
							<view class="ml10">有用 <text class="">0</text></view>
						</view>
						<view class="ml35 df aic">
							<image src="@/static/images/icon_game_5.png" class="img_8"></image>
							<view class="ml10">没用 <text class="">0</text></view>
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
		
	</view>
</template>

<script setup>
	
	import {ref, reactive} from 'vue';
	import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
	
</script>

<style lang="scss" scoped>
	
	.game_evaluate_page {
		position: relative;
		min-height: 100vh;
		background-color: #fff;
		padding-bottom: calc(20rpx + content(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		.game_content_box {
			position: relative;
			padding: 32rpx;
			.recommend_tag_btn {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 308rpx;
				height: 96rpx;
				font-size: 28rpx;
				color: #333;
				border-radius: 8rpx;
				background: #FFFFFF;
				box-shadow: 0px 4rpx 8rpx  #000000;
				&.current {
					color: #fff;
					background: #F5220F;
				}
			}
		
		}
		.mode_sw {
			position: relative;
			font-size: 32rpx;
			font-weight: bold;
			color: #999;
			&.active {
				color: #333;
			}
		}
		.line_ver_sty {
			position: relative;
			width: 2px;
			height: 40rpx;
			background-color: #333;
			margin-left: 10rpx;
			margin-right: 10rpx;
		}
		.game_user_pic {
			position: relative;
			width: 76rpx;
			height: 76rpx;
			border-radius: 50%;
			vertical-align: middle;
		}
		.btn_pos_opa {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			z-index: 2;
		}
	}

</style>
